<template>
  <div class="userlogin">
    <h1>用户名登录</h1>
    <template>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="ruleForm.username"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="verifycode">
          <el-input text="text" v-model="ruleForm.verifycode"></el-input>

          <span class="login-code">
            <i v-html="captcha"></i>
          </span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </template>
  </div>
</template>

<script>
import * as api from "@/api/login.js";

export default {
  data() {
    //验证码用户名
    let checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入用户名！"));
      } else if (!/^[0-9a-zA-Z_]{3,12}$/.test(value)) {
        return callback(new Error("用户名为3-12位的数字字母下划线！"));
      } else {
        return callback();
      }
    };
    //验证密码
    let checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入密码！"));
      } else if (value.length < 3) {
        return callback(new Error("密码长度不少于3位！"));
      } else {
        return callback();
      }
    };
    // 验证验证码
    let checkVerifycode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入验证码！"));
      } else {
        return callback();
      }
    };
    return {
      captcha: "",
      ruleForm: {
        username: "",
        password: "",
        verifycode: "",
      },
      rules: {
        username: [{ validator: checkName, trigger: "blur" }],
        password: [{ validator: checkPassword, trigger: "blur" }],
        verifycode: [{ validator: checkVerifycode, trigger: "blur" }],
      },
    };
  },

  created() {
    this.getChaptcha();
  },
  watch: {
    ruleForm: {
      handler(newval) {
        console.log(newval);
      },
      deep: true,
    },
  },
  methods: {
    getChaptcha() {
      api.getCaptcha().then((res) => {
        this.captcha = res.data.img;
      });
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          api.verifyCaptcha(this.ruleForm.verifycode).then(async (res) => {
            console.log(res.data);
            if (res.data.state) {
              console.log(res.data.state);
              let rs = await api.userLogin(
                this.ruleForm.username,
                this.ruleForm.password
              );
              console.log(rs);
              if (rs.data.state) {
                this.jumpFn("/layout");
              } else {
                alert("用户名或密码错误");
              }
            } else {
              alert("验证码错误，请重新输入");
              this.getChaptcha();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.login-code {
  position: absolute;
  left: 55px;
  top: -2px;
  z-index: 100;
}
</style>
